<template>
	<div id="app">
		<el-button @click="createDialog">点击创建表单弹窗</el-button>
		<el-button @click="createConfirmDialog">点击创建确认弹窗</el-button>
		<el-button @click="createInfoDialog">点击创建信息弹窗</el-button>
	</div>
</template>

<script>
import { createDialog } from '@/components/globalDialog'
import formDemo from '@/views/formDemo.vue'

export default {
	name: 'App',
	data() {
		return {
			isVisible: false
		}
	},
	methods: {
		async createDialog() {
			try {
				const {data, close} = await createDialog(
						{
							type: 'form',
							title: '弹窗标题',
							contentComponent: formDemo,
							contentProps: {
								initialData: {
									name: '张三'
								}
							},
							okText: '确定',
							cancelText: '取消'
						}
				)
				console.log(data)
				setTimeout(() => {
					close()
				}, 1000)
			} catch (error) {
				if (error.data === 'cancel') {
					this.$message.warning('取消操作')
				}
			}
		},
		async createConfirmDialog() {
			try {
				const {data, close} = await createDialog(
						{
							type: 'confirm',
							title: '确认弹框',
							content: '确认弹框内容'
						}
				)
				console.log(data)
				setTimeout(() => {
					close()
				}, 1000)
			} catch (error) {
				if (error.data === 'cancel') {
					this.$message.warning('取消操作')
				}
			}
		},
		async createInfoDialog() {
			try {
				await createDialog(
						{
							type: 'info',
							title: '信息展示',
							content: '信息展示内容'
						}
				)
			} catch (error) {
				if (error.data === 'cancel') {
					this.$message.warning('取消操作')
				}
			}
		}
	}
}
</script>
